<template>
    <form>
        <div class="file">
            <div class="form-group">
                <label for="exampleFormControlFile1"></label>
                <input type="file" class="form-control-file" id="exampleFormControlFile1" @change="fileChange" multiple>
            </div>
            <div>
                <span v-for="item in imgList" :key="item">{{ item.name }}</span>
                <img style="width:420px;height: 500px; display: flex;" :src="imgbase64">
            </div>
            <div>
                <button @click.prevent="submit1" class="btn btn-outline-primary"
                    style="width: 420px;background-color: blanchedalmond;">提交试卷</button>
            </div>
            <div>
                <button @click.prevent="submit2" class="btn btn-outline-primary"
                    style="width: 420px;background-color: blanchedalmond;">提交答题卡</button>
            </div>
            <div>
                <button @click.prevent="wait" class="btn btn-outline-primary"
                    style="width: 420px;background-color: blanchedalmond;">查看结果</button>
            </div>
        </div>
    </form>
</template>

<script>
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap"
import axios from "axios"
import router from "@/router"
import $ from "jquery"

export default {
    data() {
        return {
            imgbase64: "",
            imgList: [],
            fileNames: [],
        }
    },
    methods: {
        fileChange(e) {
            let file = e.target.files[0]
            let _sliceBlob = new Blob([file].slice(0, 5000));
            let _sliceFile = new File([_sliceBlob], "test.png");
            let fr = new FileReader();
            fr.readAsDataURL(_sliceFile);
            let self = this;
            fr.onload = function () {
                self.imgbase64 = fr.result
            }
            if (e.target.files.lenth > 1) {
                this.imgList.concat(e.target.files)
            }
            else {
                this.imgList.push(e.target.files[0]);
            }
            this.fileNames.push(file.name);
        },
        async submit1() {
            this.imgList.map((item, index) => {
                let _formData = new FormData();
                _formData.append("file", item)
                return axios.post("http://localhost:3600/download1/", _formData).then(() => {
                    console.log("文件上传成功：", this.fileNames[index]);
                });
            });
            // router.push({ name: 'ReceiveView' });
        },
        async submit2() {
            this.imgList.map((item, index) => {
                let _formData = new FormData();
                _formData.append("file", item)
                return axios.post("http://localhost:3600/download2/", _formData).then(() => {
                    console.log("文件上传成功：", this.fileNames[index]);
                });
            });

        },
        wait() {
            router.push({ name: 'ReceiveView' });
            var data = { "message": "lym" }
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",
                url: "http://127.0.0.1:5000/api/endpoint",
                data: JSON.stringify(data),
            });
        }


    },


}
</script>

<style scoped>
.file {
    margin-left: 700px;
    margin-top: 30px;
}
</style>
